 <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>设备状态</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <script src="../config.js"></script>
  <style>
    body,html{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      touch-action: none;
    }
    #app{
      font-size: 0.28rem;
      background-color: #F2F2F2;
      height: 60%;
      overflow-x: hidden;
      overflow-y: auto;

    }
    p{
      color:black;
    }
    .title{
      width: 100%;
      display: flex;
      justify-content:center ;
      padding: 0.4rem 0;
      text-align: center;
      background-color: white;

    }
    .title-item{
      width: 23%;
      padding: 0.1rem 0;
    }
    .title-item:nth-child(2){
      border-left:1px solid #BBBBBB ;
      border-right:1px solid #BBBBBB ;
    }
    .title-item:nth-child(3){
      border-right:1px solid #BBBBBB ;
    }
    .smallFontSize{
      font-size:0.18rem
    }
    .tableList{
      width: 100%;
      text-align: center;
      font-size: 0.22rem;
      background-color: white;
    }

    .tableHeader .firstTable{
      width: 40%;
    }
    .tableList td{
      width: 20%;
      padding: 0.2rem  0;
    }
    .backGround{
      background-color: #F4F4F4;
    }
    .footer{
      text-align: center;
      width: 100%;
      font-size: 0.24rem;
      background-color: white;
      padding: 0.1rem 0;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 99;
      border-top:1px solid #BBBBBB;
    }
    .select{
      /*width: 90%;*/
      padding: 0.12rem 0 0.2rem 0.2rem;
      margin: 0 auto 0.6rem;
      position: relative;
    }
    .select-item{
      width: 20%;
      background-color: white;
      float: left;
      text-align: center;
      font-size: 0.22rem;
      padding: 0.1rem 0 ;
      margin: 0 0 0 1px;
    }
    .select .active{
      background-color: #EAEAEA;
    }
    .fontGray{
      color:#7D7D7D ;
    }
    .round{
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
      /*background-color: #2ac845;*/
      display: inline-block;
      margin: 0 auto;
    }
    .roundBlue{
      background-color: #A7F9F4;
    }
    .roundYellow{
      background-color: #FEDD99;
    }
    .roundRed{
      background-color:#FF0007;
    }
    .roundViolet{
      background-color:#8D1AD3;
    }
    .screen .screenActive,.chooseList .screenActive{
      background-color: #2ac845;
      color:white;
    }
    .screen{
      position: absolute;
      top: 0.78rem;
      left: 0.5rem;
      background-color: white;
      width: 1.4rem;
    }
    .screen-item{
      width: 1.4rem;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      float: left;
      margin: 0;
      padding: 0;
      border-bottom:1px solid #ccc;
      border-left:1px solid #ccc;
      border-right:1px solid #ccc;
      z-index: 99999;
    }

    .loading{
      width: 100%;
      height: 100%;
      background-color: transparent;
      position: absolute;
      top:0;
      left: 0;
      z-index: 999;
    }
    .loading>p{
      width: 100%;
      height: 50%;
      margin-top: 80%;
      text-align: center;
      font-size: 0.24rem;
    }
    .triangle{
      display: inline-block;
      width: 0;
      height: 0;
      border-width: 0.1rem 0.1rem 0 ;
      border-style:solid;
      border-color: rgba(0, 0, 0, 0.69) transparent transparent;
      margin-left: 0.1rem;
    }
    .shelter{
      width: 100%;
      height: 300%;
      position: absolute;
      top:0;left: 0;
      background-color: transparent;
      z-index: 1;
    }
    .chooseDiv{
      width:1.2rem;
      position: absolute;
      right: 0;
      top:0.1rem;
      font-size:0.22rem;
      text-align: center;
    }
    .chooseTitle{
      font-size:0.22rem;
      margin: 0;
      padding: 0.13rem 0 0.1rem;
    }
    .chooseList{
      background-color: white;
      border-top:1px solid #ccc;
      border-left:1px solid #ccc;
      border-right:1px solid #ccc;
      border-bottom:none;
      position: absolute;
      right: 5%;
      width: 90%;
      z-index: 99999;
    }
    .chooseList p{
      font-size: 0.22rem;
      margin: 0;
      padding: 0.08rem 0;
      border-bottom:1px solid #ccc;
    }

  </style>

</head>

<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>

<body>
<div id="app" class="mui-content" >
  <div class="mui-content  mui-scroll-wrapper mui-off-canvas-backdrop" style="padding-bottom: 0.6rem; " >
    <div class="mui-scroll restaurant " >
      <div class="title">
        <div class="title-item">
          <p>设备总数</p>
          <p><strong>{{original.total}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
        <div class="title-item">
          <p>在线</p>
          <p><strong>{{original.onLine}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
        <div class="title-item">
          <p>离线</p>
          <p><strong>{{original.offLine}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
        <div class="title-item">
          <p>未安装</p>
          <p><strong>{{original.notInstalled}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
      </div>
      <!--设备选择栏 start-->
      <div class="select">
        <p class="select-item" @click="select(1)" :class="{active:type===1}" >礼品机</p>
        <p class="select-item" @click="select(2)" :class="{active:type===2}" >彩票机</p>
        <p class="select-item" @click="select(3)" :class="{active:type===3}" >娱乐机</p>
        <p class="select-item" @click="select(4)" :class="{active:type===4}" >兑币机</p>
        <div class="chooseDiv"  v-show="type === 1">
          <div class="chooseTitle" @click="openChooseList" >
            {{chooseItem.value}}
            <span class="triangle" style="margin: 0"></span>
          </div>
          <div  v-if="chooseShow"  class="chooseList">
            <p class="" v-for="(item,index) in chooseList" :class="{screenActive : chooseItem.key === item.key }"  @click="chooseFun(item)" >{{item.value}}</p>
          </div>

        </div>

      </div>
      <!--设备选择栏 end-->
      <!--list  start -->
      <table  v-show="!loadingShow" class="tableList">
        <thead>
          <tr class="tableHeader" >
            <td class="firstTable" style="position: relative;top:0;left: 0;z-index:3">
              <span @click="screenClickFun" style="display: inline-block;width: 100%">
                {{thead.one}}
                <span class="triangle"></span>
              </span>
              <div v-if="screenShow" class="screen">
                <p class="screen-item" @click="screenFun(0)" :class="{screenActive : screenType ===0 }">全部</p>
                <p class="screen-item" @click="screenFun(1)" :class="{screenActive : screenType ===1 }">在线</p>
                <p class="screen-item" @click="screenFun(2)" :class="{screenActive : screenType ===2 }">离线</p>
                <p class="screen-item" @click="screenFun(3)" :class="{screenActive : screenType ===3 }" v-show="type !==4">未安装</p>
                <p class="screen-item" @click="screenFun(4)" :class="{screenActive : screenType ===4 }" v-show="type ===1">出奖警告</p>
              </div>
            </td>
            <td class="fontGray">{{thead.two}}</td>
            <td :class="{fontGray: type !==4}">{{thead.three}}</td>
            <td :class="{fontGray: type ===3}">{{thead.four}}</td>
          </tr>
        </thead>
        <tbody v-if="list.length !==0">
         <tr  v-for="(item,index) in list"   :class="{backGround : index%2 === 0}" @click="toDetail(index)">
          <td style="text-align: left;display: flex;justify-content: flex-start;width: 100%">
            <div style="width: 0.2rem ;height: 0.2rem;margin:0.06rem  0.1rem 0 0.1rem">
              <div v-show=" type ===1 && item.coinsType !==0" class="round" :class="{'roundBlue':item.coinsType ===1, 'roundYellow' : item.coinsType ===2 , 'roundRed' :  item.coinsType ===3 ,'roundViolet' : item.coinsType ===4}"   ></div>
            </div>
            <div>
              <p style="margin: 0;font-size: 0.2rem;padding: 0;line-height: 0.2rem">{{item.one}}</p>
              <p v-if="item.time !==''  || item.state !==0 " style="font-size: 0.16rem;margin: 0;padding: 0;height: 0.2rem" class="fontGray"  >{{item.time}}</p>
            </div>
          </td>
          <td class="fontGray" style="position: relative;"  >
            <!--1.正常  2.离线 3.未安装-->
            <img v-show="item.state === 1 " src="../images/troubleflag-green.png" alt="" style="width: 0.2rem;display: inline-block;"/>
            <img v-show="item.state === 2" src="../images/troubleflag-gray.png" alt="" style="width: 0.2rem;display: inline-block;"/>
            <img v-show="item.state === 3" src="../images/troubleflag-gray2.png" alt="" style="width: 0.2rem;display: inline-block;"/>
            <span style="display: inline-block;width: 0.9rem;margin-right: 0.05rem"   :style="{textAlign: textAlign}">{{item.two}}</span>
          </td>
          <td :class="{fontGray: type !==4}" style="padding: 0  0.2rem 0 0"  :style="{textAlign: textAlign}" >{{item.three}}</td>
          <td :class="{fontGray: type ===3}" style="text-align: right;padding: 0  0.2rem 0 0">{{item.four}}</td>
        </tr>
        </tbody>
      </table>
      <!--list  end-->
      <div  v-show="loadingShow"  style="background-color: white;height: 9rem;"></div>
      <!-- 暂无数据-->
      <div class="shelter" v-show="shelterShow" style=" " @click="shelterFun"></div>

    </div>
  </div>

  <!--loading-->
  <div v-show="loadingShow" class="loading">
    <p>加载中...</p>
  </div>
  <!--点击设备 赛选的蒙版-->


</div>
<!--页尾提示 -->
<div class="footer">
  本列表为设备当前状态
</div>






<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        currentShopObj: {},
        type:1,   //1.礼品机  2.彩票机  3.娱乐机 4.兑币机
        original:{
          total:'- -',
          onLine:'- -',
          offLine:'- -',
          notInstalled:'- -',
        },
        storeDetail:'',  //门店信息
        isShow:false,   //false   收币量不显示  true 显示
        screenType:0,  //0 全部  1. 在线   2.离线 3.未安装 4.出奖警告
        screenShow:false , //true  筛选框显示  false 不显示
        loadingShow:false,  //loading 显示
        shelterShow:false,   //点击设备  赛选 遮挡层显示  点击取消赛选框
        chooseShow:false,
        chooseItem:{
          value:'全部',
          key:0
        },
        chooseList:[
          {value:'全部',key:0},
          {value:'本周',key:1},
          {value:'近两周',key:2},
          {value:'近三周',key:3},
          {value:'近四周',key:4},
        ]
      }
    },
    computed:{
      list:function(){
        var list=[];
        var vm=this;
        var originalData=[];
        var screenList=[]
        switch (this.type){
          //this.type 1.礼品机  2.彩票机  3.娱乐机 4.兑币机
          case 1:
            if( vm.original.reward && vm.original.reward.length !==0 ){
              originalData=JSON.parse(JSON.stringify(vm.original.reward));
// screenType 筛选  0 全部   1. 在线   2.离线 3.未安装 4.出奖警告
// item.state  1. 在线  2.离线 3.离线
// item.coinsType  0 正常   !==0 出奖警告  （只有礼品机）
              if(vm.screenType ===1){
                originalData.forEach(function(item,index){
                   if(item.state === 1){
                     screenList.push(item)
                   }
                })
              }else if(vm.screenType ===2){
                originalData.forEach(function(item,index){
                  if(item.state === 2){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===3){
                originalData.forEach(function(item,index){
                  if(item.state === 3){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===4){
                originalData.forEach(function(item,index){
                  if(item.coinsType !== 0){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===0){
                screenList=originalData
              }

              screenList.forEach(function(item,index){
                list.push({
                  one:item.deviceName,
                  two:  vm.isShow ?  item.outPrice+'个' : '--',
                  three: vm.isShow ?  item.coins+'币' : '--' ,
                  four: item.avgCoins+'币/奖' ,
                  state:item.state,
                  time:item.time ? item.time : '',
                  coinsType:item.coinsType,
                  deviceType:item.deviceType,
                  deviceNo:item.deviceNo,
                  deviceId:item.deviceId,
                  deviceName:item.deviceName,
                })
              });
            }else{
              list=[]
            }
            break;
          case 2:
            if( vm.original.ticket && vm.original.ticket.length !==0 ){
// screenType 筛选  0 全部   1. 在线   2.离线 3.未安装
              originalData=JSON.parse(JSON.stringify(vm.original.ticket));
              if(vm.screenType ===1){
                originalData.forEach(function(item,index){
                  if(item.state === 1){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===2){
                originalData.forEach(function(item,index){
                  if(item.state === 2){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===3){
                originalData.forEach(function(item,index){
                  if(item.state === 3){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===0){
                screenList=originalData
              }
              screenList.forEach(function(item,index){
                 list.push({
                one:item.deviceName,
                two: item.date+'天' ,
                three: vm.isShow ?  item.coins+'币' : '--',
                four:item.outTicket+'票/币',
                state:item.state,
                time:item.time ? item.time : '',
                coinsType:'',
                deviceType:item.deviceType,
                deviceNo:item.deviceNo,
                deviceId:item.deviceId,
                deviceName:item.deviceName,
                 })
              });
            }else{
              list=[]
            }
            break;
          case 3:
            if( vm.original.game && vm.original.game.length !==0 ){
// screenType 筛选  0 全部   1. 在线   2.离线 3.未安装
              originalData=JSON.parse(JSON.stringify(vm.original.game));
              if(vm.screenType ===1){
                originalData.forEach(function(item,index){
                  if(item.state === 1){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===2){
                originalData.forEach(function(item,index){
                  if(item.state === 2){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===3){
                originalData.forEach(function(item,index){
                  if(item.state === 3){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===0){
                screenList=originalData
              };

              screenList.forEach(function(item,index){
                list.push({
                one:item.deviceName,
                two:' ',
                three:item.date+'天',
                four: vm.isShow ?  item.coins+'币' : '--',
                state:item.state,
                time:item.time ? item.time : '',
                coinsType:'',
                  deviceType:item.deviceType,
                  deviceNo:item.deviceNo,
                  deviceId:item.deviceId,
                  deviceName:item.deviceName,
                })
              });
            }else{
              list=[]
            }
            break;
          case 4:
            if( vm.original.atm && vm.original.atm.length !==0 ){
// screenType 筛选  0 全部   1. 在线   2.离线
              originalData=JSON.parse(JSON.stringify(vm.original.atm));
              if(vm.screenType ===1){
                originalData.forEach(function(item,index){
                  if(item.state === 1){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===2){
                originalData.forEach(function(item,index){
                  if(item.state === 2){
                    screenList.push(item)
                  }
                })
              }else if(vm.screenType ===0){
                screenList=originalData
              };
              screenList.forEach(function(item,index){
                 list.push({
                one:item.deviceName,
                two: item.date+'天' ,
                three: item.successRate,
                four:item.state === 1 ? '在线' : '离线',
                state:item.state,
                time:item.time ? item.time : '',
                coinsType:'',
                deviceType:item.deviceType,
                deviceNo:item.deviceNo,
                deviceId:item.deviceId,
                deviceName:item.deviceName,
              })
              });
            }else{
              list=[]
            }
            break;
          default:
            list=[]
        }
        return list
      },
      thead:function(){
        var list={};
        switch (this.type){
          case 1:
            list={one:'设备',two:'出奖样本',three:'收币量',four:'平均垫币量'};
            break;
          case 2:
            list={one:'设备',two:'采样天数',three:'收币量',four:'出票量'};
            break;
          case 3:
            list={one:'设备',two:'',three:'采样天数',four:'收币量'};
            break;
          case 4:
            list={one:'设备',two:'采样天数',three:'应答成功率',four:'状态'};
            break;
          default:
            list={one:'设备',two:'出奖样本',three:'收币量',four:'平均垫币量'};
        }
        return list
      },
      textAlign:function(){
        if(this.isShow){
            return 'right'
        }else{
            return 'center'
        }
      }
    },
    created: function() {
      var vm = this
      mui.init();
      mui.plusReady(function() {
        vm.receiveParams()
        mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005  });
      })
    },
    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview();
        this.storeDetail=self.storeDetail;
        this.isShow=self.isShow
        this.type=1
        this.localData()
      },
      localData:function(){
        var  vm=this
        console.log(JSON.stringify({
          storeId:vm.storeDetail.storeId,
          store_type:vm.storeDetail.storeType,
          dateType:vm.chooseItem.key
        }))
       vm.loadingShow=true
        config.ajax({
          url:'/deviceState/getState',
          data:{
            storeId:vm.storeDetail.storeId,
            store_type:vm.storeDetail.storeType,
            dateType:vm.chooseItem.key
          },
          success:function(res){
            if(res.result ===1){
              vm.original=res.data
              console.log(JSON.stringify(res.data))
            }else{
              mui.toast(res.errormsg)
            }
            vm.loadingShow=false

          },
          error:function(res){
            vm.loadingShow=false
            mui.toast(res.errormsg)
          }
        })
      },

      toDetail:function(index){
//        this.type  1 礼品机 2.彩票机 3.娱乐机  4.兑币机（没有详情页，不跳转）
        var  vm=this;
        if(this.type !==4){
          mui.openWindow({
          url: '../revenue/coinDevice.html',
          id: 'coinDevice',
          styles: {
            titleNView: {
              titleText:'',
              titleColor: "#FFFFFF",
              titleSize: "14px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeDetail.storeId,
            storeName: vm.storeDetail.storeName,
            deviceType: vm.list[index].deviceType,
            deviceNo: vm.list[index].deviceNo,
            deviceId: vm.list[index].deviceId,
            dateType: 0,
            deviceName:vm.list[index].deviceName,
            fromDate: new Date().format('yyyy-MM-dd'),
            toDate:new Date().format('yyyy-MM-dd'),
            type:vm.type ===1 ? 4 : vm.type ===2 ? 1 : 2,   // vm.type 1.礼品机  下个页面优先显示 垫币量 选项  2.彩票机 优先显示 返奖率   3.娱乐机 显示投币量
            coinsType:vm.list[index].coinsType
          }
        });
        }
      },
      select:function(type){
        var vm=this;
        if(type !== vm.type){
          vm.type=type
          vm.screenType=0
          vm.$set(vm.thead , 'one','设备')
          vm.screenShow=false
        }
      },
      screenFun:function(screenType){
        var  vm=this
        vm.screenType=screenType;
        var text=screenType ===0 ? '全部'  : screenType ===1 ? '在线' : screenType ===2 ? "离线" :screenType ===3 ?'未安装' :'出奖警告';
        vm.$set(vm.thead , 'one',text);
        vm.screenShow=false
      },
      screenClickFun:function(){
        var vm=this;
        vm.shelterShow=true;
        vm.screenShow=true
      },
      shelterFun:function(){
        this.shelterShow=false;
        this.screenShow=false;
        this.chooseShow=false;
      },
      openChooseList:function(){
        this.chooseShow=true;
        this.shelterShow=true;
      },
      chooseFun:function(item){
        this.chooseItem=item;
        this.shelterShow=false;
        this.chooseShow=false;
        this.localData()
      }

    },

  })
</script>
</body>

</html>